<template>
  <div class="container">
    <h5>计算属性 函数</h5>
今年{{ age }}
后年{{ newAge }}
  <!-- <input type="number" v-model="age"> -->
  <input type="number" v-model="newAge">
  </div>
</template>

<script>

import {computed, ref} from 'vue'

export default {
  name: "App",

  setup() {
   // 计算属性  不是配置项啦，改成啦函数 想定义多个计算属性可以多次调用函数即可。
   // 当需要依赖现有的响应数据， 经过一定逻辑得到新的数据
    const age=ref(16)
   //  计算属性 基本用法只读
    const newAge=computed(()=>{
      return age.value+2
    })
    const newAge2=computed(()=>{
      return age.value+3
    })
   //  计算属性的高级用法 （可读写） vue2也可
   // const newAge=computed({
   //    set(value){
   //        console.log(value);
   //        age.value=value-2
   //    },
   //    get(){
   //       return age.value+2
   //    }
   // })


    return {age,newAge};
  },
};
</script>

<style>
</style>